<!--
 * @Author:
 * @Date: 2022-11-24 13:56:00
 * @LastEditors:
 * @LastEditTime: 2023-07-24 20:57:00
 * @FilePath: \immoka-admin\src\views\member\listUsers.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name} , All Rights Reserved.
-->
<template>
  <div v-enter-helper="getList" class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form
            ref="dataList2"
            :inline="true"
            :model="listQuery"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-select
                v-model="listQuery.app_type"
                clearable
                filterable
                placeholder="注册方式"
                @clear="listQuery.app_type = undefined"
              >
                <el-option
                  v-for="item in appTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select
                v-model="listQuery.has_gift_bag"
                clearable
                filterable
                placeholder="是否包含礼包用户"
                @clear="listQuery.has_gift_bag = undefined"
              >
                <el-option
                  v-for="item in hasGiftBag"
                  :key="item.key"
                  :label="item.val"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select
                v-model="listQuery.sex"
                clearable
                filterable
                placeholder="性别"
                @clear="listQuery.sex = undefined"
              >
                <el-option
                  v-for="item in sexList"
                  :key="item.key"
                  :label="item.val"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="listQuery.nickname"
                clearable
                placeholder="用户昵称"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model.number="listQuery.user_code"
                clearable
                placeholder="用户编号"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model.number="listQuery.mobile"
                clearable
                placeholder="用户手机号"
                type="text"
              ></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-date-picker
                v-model="date_value"
                class="mr-5"
                clearable
                end-placeholder="请选择注册结束时间"
                range-separator="-"
                start-placeholder="请选择注册开始时间"
                type="datetimerange"
                value-format="timestamp"
                @change="handleChangeDate"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
              <el-button type="primary" @click="resetSubmit">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          row-key="id"
          style="width: 100%; margin-bottom: 20px"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <el-table-column label="用户ID" prop="user_id"></el-table-column>
          <el-table-column label="用户编号" prop="user_code"></el-table-column>
          <el-table-column label="会员手机" prop="mobile"></el-table-column>
          <el-table-column label="昵称" prop="nickname"></el-table-column>
          <el-table-column label="性别" prop="sex">
            <template slot-scope="scoped">
              <el-tag v-if="scoped.row.sex === 1" type="primary">男</el-tag>
              <el-tag v-if="scoped.row.sex === 2" type="warning">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="房间id" prop="room_id"></el-table-column>
          <el-table-column label="邀请码" prop="user_no"></el-table-column>
          <el-table-column
            label="邀请礼包"
            prop="gift_bag_name"
          ></el-table-column>
          <el-table-column
            label="剩余数量"
            prop="gift_bag_quantity"
          ></el-table-column>
          <el-table-column label="会员等级" prop="rank_id"></el-table-column>
          <el-table-column label="可用金币" prop="money">
            <template slot-scope="scope">
              <p class="mb-3">{{ scope.row.money }}</p>
            </template>
          </el-table-column>
          <el-table-column label="收益" prop="earnings"></el-table-column>
          <el-table-column label="封禁时间" prop="seal_time"></el-table-column>
          <el-table-column label="注册时间" prop="register_time"></el-table-column>
          <el-table-column label="情侣昵称" prop="lovers.nickname"></el-table-column>
          <el-table-column label="情侣编号" prop="lovers.user_code"></el-table-column>
          <el-table-column label="情侣等级" prop="lovers.level"></el-table-column>

          <el-table-column fixed="right" label="操作" prop="" width="110px">
            <template slot-scope="{ row }">
              <el-dropdown trigger="click">
                <el-button type="primary"
                >操作<i class="el-icon-arrow-down el-icon--right"></i
                ></el-button>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item @click.native="rowRecharge(row)"
                  >充值
                  </el-dropdown-item> -->
                  <el-dropdown-item @click.native="rowSendGift(row)"
                  >送礼物
                  </el-dropdown-item
                  >
                  <el-dropdown-item divided @click.native="rowDetail(row)"
                  >详情
                  </el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click.native="rowDelete(scope.row)">删除</el-dropdown-item> -->
                  <el-dropdown-item
                    v-if="row.seal_time === ''"
                    @click.native="rowBan(row)"
                  >封用户
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.seal_time !== ''"
                    @click.native="rowCancelBan(row)"
                  >解封
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="row.role === 1"
                    v-text="'设为官方'"
                    @click.native="rowSetRoot(row)"
                  />
                  <el-dropdown-item
                    v-if="row.role === 2"
                    v-text="'取消官方'"
                    @click.native="rowCancelSetRoot(row)"
                  />
                  <el-dropdown-item @click.native="rowReset(row)"
                  >重置环信帐号
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="rowExperience(row)"
                  >赠送经验
                  </el-dropdown-item
                  >
                  <el-dropdown-item @click.native="rowContacts(row)"
                  >查看人脉
                  </el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click.native="rowTeenModel(scope.row)">重置青少年模式密码</el-dropdown-item> -->

                  <el-dropdown-item
                    @click.native="deBounceWrap(handleFrozen, row)"
                  >
                    {{ row.earnings_status ? '冻结账户' : '解冻账户' }}
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="rowPhone(row)">
                    换绑手机号
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="auditCancel(row)">
                    重置审核状态
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="auditGift(row)">
                    修复礼物墙
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleMBeanFlow(row)">
                    M豆流水
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleIntegralFlow(row)">
                    积分流水
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleAddStone(row)">
                    增加洗练石
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 充值弹框 -->
    <el-dialog
      :visible.sync="rechargeVisible"
      title="添加充值"
      @close="handleDialogClose('rechargeForm')"
    >
      <el-form ref="rechargeForm" :model="rechargeForm" label-width="120px">
        <el-form-item
          :rules="{
            type: 'number',
            required: true,
            message: '请输入小于等于10000000数字',
            trigger: 'blur',
            max: 10000000
          }"
          label="充值金额"
          prop="money"
        >
          <el-input
            v-model.number="rechargeForm.money"
            clearable
            style="width:250px"
          ></el-input>
          <el-button type="primary" @click="handleMax">一键最大值</el-button>
        </el-form-item>
        <el-form-item label="充值类型">
          <el-radio-group v-model="rechargeForm.type">
            <el-radio :label="1">余额</el-radio>
            <el-radio :label="2">收益</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :rules="{
            required: true,
            trigger: 'blur',
            message: '请输入内容',
          }" label="备注" prop="describe"
        >
          <el-input
            v-model="rechargeForm.describe"
            style="width:250px"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('rechargeForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 赠送礼物弹框 -->
    <el-dialog
      :visible.sync="sendGiftVisible"
      clearable
      title="赠送礼物"
      @close="handleDialogClose('sendGiftForm')"
    >
      <el-form ref="sendGiftForm" :model="sendGiftForm" label-width="120px">
        <el-form-item label="选择礼物" prop="gift">
          <el-select
            v-model="sendGiftForm.gift_id"
            filterable
            placeholder="请选择礼物"
          >
            <el-option
              v-for="item in giftForm"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :rules="{
            type: 'number',
            required: true,
            message: '请输入正确数字',
            trigger: 'blur',
            min: 0
          }"
          label="礼物数量"
          prop="number"
        >
          <el-input v-model.number="sendGiftForm.number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendGiftVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('sendGiftForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 个人详情弹框 -->
    <el-dialog
      :visible.sync="detailVisible"
      title="用户资料"
      @close="handleDialogClose('detailForm')"
    >
      <el-form
        ref="detailForm"
        :model="detailForm"
        :rules="detailRules"
        label-width="120px"
      >
        <el-form-item label="头像" prop="head_picture">
          <el-upload
            :auto-upload="true"
            :before-upload="beforeAvatarUpload"
            :file-list="detailPictureList"
            :http-request="customizeUpload"
            :limit="1"
            :on-change="handleChange"
            :on-error="handleError"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            action=""
            list-type="picture-card"
          >
            <!-- :before-upload="beforeAvatarUpload" -->
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户ID" prop="user_code">
          <el-input v-model="detailForm.user_code"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="detailForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="detailForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="真实姓名" prop="real_name">
          <el-input v-model="detailForm.real_name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="identity_number">
          <el-input v-model="detailForm.identity_number"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <!-- <el-input v-model="detailForm.birthday"></el-input> -->
          <el-date-picker
            v-model="detailForm.birthday"
            placeholder="选择生日"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="签名" prop="signature">
          <el-input v-model="detailForm.signature"></el-input>
        </el-form-item>
        <el-form-item label="星座" prop="constellation">
          <el-select
            v-model="detailForm.constellation"
            clearable
            filterable
            placeholder="星座"
            @clear="detailForm.constellation = undefined"
          >
            <el-option
              v-for="item in constellationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="detailForm.constellation"></el-input> -->
        </el-form-item>
        <el-form-item label="职业" prop="profession">
          <el-input v-model="detailForm.profession"></el-input>
        </el-form-item>
        <el-form-item label="邀请礼包" prop="gift_bag_id">
          <el-select
            v-model="detailForm.gift_bag_id"
            clearable
            filterable
            placeholder="请选择礼包"
          >
            <el-option
              v-for="item in giftBagList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邀请礼包数量" prop="gift_bag_quantity">
          <el-input v-model.number="detailForm.gift_bag_quantity"></el-input>
        </el-form-item>

        <el-form-item label="情侣昵称" prop="couple">
          <el-input v-model="detailForm.couple.teammate.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="情侣编号" prop="couple">
          <el-input v-model="detailForm.couple.teammate.user_code" disabled></el-input>
        </el-form-item>
        <el-form-item label="情侣等级" prop="couple">
          <el-input v-model="detailForm.couple.level" disabled></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('detailForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog :visible.sync="deleteVisible" title="确定删除吗?" width="435px">
      <span style=""
      ><em style="font-style: normal; color: red">删除后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 封用户 -->
    <el-dialog
      :visible.sync="banVisible"
      title="封禁用户"
      @close="handleDialogClose('banForm')"
    >
      <el-form ref="banForm" :model="banForm" label-width="120px">
        <el-form-item
          :rules="{
            required: true,
            message: '请选择封禁时间',
            trigger: 'blur'
          }"
          label="封禁时间"
          prop="seal_time"
        >
          <el-date-picker
            v-model="banForm.seal_time"
            placeholder="选择日期时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :rules="{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }"
          label="封禁理由"
          prop="remark"
        >
          <el-input v-model="banForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="banVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('banForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 解封用户 -->
    <el-dialog :visible.sync="cancelBanVisible" title="信息" width="435px">
      <span style="">确定执行此操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBanVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCancelBan">确 定</el-button>
      </span>
    </el-dialog>
    <!--设为官方 -->
    <el-dialog :visible.sync="setRootVisible" title="设为官方">
      <span>确定执行此操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRootVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSetRoot">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 取消设为官方 -->
    <el-dialog :visible.sync="cancelSetRootVisible" title="取消设为官方">
      <span>确定执行此操作？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSetRootVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCancelSetRoot"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 重置环信帐号 -->
    <el-dialog :visible.sync="resetVisible" title="重置环信帐号?">
      <span style=""
      ><em style="font-style: normal; color: red">执行此操作后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReset">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 赠送经验 -->
    <el-dialog
      :visible.sync="sendExperienceVisible"
      title="赠送经验"
      @close="handleDialogClose('sendExperienceForm')"
    >
      <div class="ml-12 mb-4">
        <p class="text-xl font-bold text-red-400">注：</p>
        <p>1.经验值范围：0.1 - 7200000，如果超过该范围不更新用户等级</p>
        <p>2.经验值四舍五入保留两位小数</p>
      </div>
      <el-form
        ref="sendExperienceForm"
        :model="sendExperienceForm"
        label-width="120px"
      >
        <el-form-item label="当前经验值" prop="exp">
          <el-input v-model="sendExperienceForm.exp" disabled></el-input>
        </el-form-item>
        <el-form-item label="当前等级" prop="rank_id">
          <el-input v-model="sendExperienceForm.rank_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="赠送经验值" prop="experience">
          <el-input v-model="sendExperienceForm.experience"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendExperienceVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('sendExperienceForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 重置青少年模式密码 -->
    <el-dialog :visible.sync="resetTeenPwdVisible" title="重置青少年模式密码?">
      <span style=""
      ><em style="font-style: normal; color: red">执行此操作后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetTeenPwdVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmResetTeenPwd">确 定</el-button>
      </span>
    </el-dialog>

    <!--  冻结账户  -->
    <el-dialog :visible.sync="switchFreeze" title="冻结账户" width="30%">
      <div class="flex items-center">
        <p class="w-32"><span class="text-red-400" v-text="'*'"/>冻结原因</p>
        <el-input v-model="reasonForFreezing" clearable size="mini"></el-input>
      </div>
      <div class="flex justify-end items-center mt-4">
        <el-button
          size="mini"
          type="info"
          @click="switchFreeze = false"
          v-text="'取消'"
        />
        <el-button
          size="mini"
          type="primary"
          @click="handleFrozenSubmit"
          v-text="'提交'"
        />
      </div>
    </el-dialog>
    <!--  冻结账户结束  -->

    <el-dialog :visible.sync="switchConfirm" title="确认弹窗" width="30%">
      <p>
        确认解封
        <span class="text-red-400">{{ currentOperatingAccount.nickname }}</span>
        么？
      </p>
      <div slot="footer">
        <el-button size="mini" type="info">取消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="deBounceWrap(handleUnblockAccount)"
        >确认
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 换绑手机号 -->
    <el-dialog
      :before-close="handleChangePhone"
      :visible.sync="changePhone"
      title="换绑手机号"
      width="30%"
    >
      <el-form
        ref="changePhoneForm"
        :model="changePhoneForm"
        :rules="changePhoneRule"
        label-width="100px"
        size="small"
      >
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model.trim="changePhoneForm.mobile"
            placeholder="请输入手机号码"
            size="small"
            style="width:220px"
            width="100px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleChangePhone">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="deBounceWrap(handlePhone('changePhoneForm'))"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 增加洗练石 -->
    <el-dialog
      :visible.sync="addStoneVisible"
      clearable
      title="增加洗练石"
      @close="handleDialogClose('addStoneForm')"
    >
      <el-form ref="addStoneForm" :model="addStoneForm" label-width="120px">
        <el-form-item
          :rules="{
            type: 'number',
            required: true,
            message: '请输入正确数字',
            trigger: 'blur',
            min: 0
          }"
          label="洗练石数量"
          prop="count"
        >
          <el-input v-model.number="addStoneForm.count"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStoneVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit('addStoneForm')"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteData,
  listData,
  listGiftData,
  listTypeData,
  postRecharge,
  postReset,
  postSendExperience,
  postSendGift,
  postSetBan,
  postSetBanNew,
  postSetRoot,
  putEditData,
  toFreezeUser,
  toPutChangePhone,
  userAccountDetail,
  userBalanceSwap
} from '@/api/member/listUsers'

import { keepTwoDecimal } from '../../utils'
import request from '@/utils/request'

export default {
  data() {
    return {
      addStoneForm:{
        count: undefined
      },
      addStoneVisible: false,
      appTypeOptions: [
        { value: 1, label: '回声' },
        { value: 2, label: '回声' }
      ],
      constellationOptions: [
        { value: '白羊座', label: '白羊座' },
        { value: '金牛座', label: '金牛座' },
        { value: '双子座', label: '双子座' },
        { value: '巨蟹座', label: '巨蟹座' },
        { value: '狮子座', label: '狮子座' },
        { value: '处女座', label: '处女座' },
        { value: '天秤座', label: '天秤座' },
        { value: '天蝎座', label: '天蝎座' },
        { value: '射手座', label: '射手座' },
        { value: '摩羯座', label: '摩羯座' },
        { value: '水瓶座', label: '水瓶座' },
        { value: '双鱼座', label: '双鱼座' }
      ],
      confirmBtn: false,

      // 重置青少年模式密码
      resetTeenPwdVisible: false,
      // 赠送经验表单
      sendExperienceForm: {
        exp: undefined,
        rank_id: undefined,
        experience: undefined
      },
      /* @desc: 冻结账户dialog开关 */
      switchFreeze: false,
      /* @desc: 确认弹窗 开关 */
      switchConfirm: false,
      /* @desc: 冻结账号原因 */
      reasonForFreezing: '',
      /* @desc: 当前操作用户 */
      currentOperatingAccount: {},
      // 赠送经验显示
      sendExperienceVisible: false,
      // 重置环信帐号显示
      resetVisible: false,
      // 设为官方显示
      setRootVisible: false,
      // 取消设为官方
      cancelSetRootVisible: false,
      setRootForm: {
        type: 2
      },
      // 封禁用户表单
      banForm: {
        action: 1,
        seal_time: undefined,
        remark: undefined
      },
      // 封禁用户显示
      banVisible: false,
      // 解封用户
      cancelBanVisible: false,
      // 删除用户id
      dataIds: undefined,
      // 删除显示
      deleteVisible: false,
      // 礼包列表
      giftBagList: [{ value: 0, label: '未选择' }],
      // 表单验证
      detailRules: {
        user_code: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }]
      },
      // 当前行id
      row_id: '',
      detailPictureList: [],
      // 用户资料表单
      detailForm: {
        head_picture: undefined,
        user_code: undefined,
        nickname: undefined,
        sex: undefined,
        real_name: undefined,
        identity_number: undefined,
        birthday: undefined,
        signature: undefined,
        constellation: undefined,
        profession: undefined,
        gift_bag_id: undefined,
        gift_bag_quantity: undefined,
        couple: {
          level: undefined,
          teammate: {
            user_code: undefined,
            nickname: undefined
          }
        }
      },
      // 用户资料显示
      detailVisible: false,
      // 礼物的列表
      giftForm: [],
      // 赠送礼物表单
      sendGiftForm: {
        gift_id: undefined,
        number: undefined
      },
      // 赠送礼物弹框显示
      sendGiftVisible: false,
      // 充值form表单
      rechargeForm: {
        money: undefined,
        type: 1,
        describe: undefined
      },
      // 充值弹框显示
      rechargeVisible: false,

      menuList: [],
      total: 10,
      listQuery: {
        page: 1,
        perPage: 10,
        has_gift_bag: undefined,
        sex: undefined,
        nickname: undefined,
        user_code: undefined,
        app_type: undefined,
        mobile: undefined,
        register_time_start: undefined,
        register_time_end: undefined
      },
      date_value: null,
      sexList: [
        { key: 1, val: '男' },
        { key: 2, val: '女' },
        { key: 0, val: '空' }
      ],
      hasGiftBag: [
        { key: 0, val: '不包含礼包用户' },
        { key: 1, val: '包含礼包用户' }
      ],
      //换绑手机号弹窗
      changePhone: false,
      //更换用户手机表单
      changePhoneForm: {
        mobile: undefined
      },
      //验证用户手机号规则
      changePhoneRule: {
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { max: 11, message: '长度不能超过11个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTypeList()
    this.getGiftList()
    this.getList()
  },
  methods: {
    //充值按钮 一键最大值 10000000
    handleMax() {
      this.$refs.rechargeForm.resetFields()
      this.rechargeForm.money = 10000000
    },
    /*
     * @desc: 冻结或者解冻操作
     * @params: record:Object table记录
     * @return: undefined
     * */
    handleFrozen(record) {
      this.currentOperatingAccount = record
      /* @desc: earnings_status 描述用户状态 1 ： 正常 0 ： 被冻结 */
      const { earnings_status } = record
      if (earnings_status === 1) {
        /* @desc: 冻结操作 */
        this.switchFreeze = true
      } else if (earnings_status === 0) {
        /* @desc: 解冻操作 */ /* @desc: 发送请求 解冻用户 */
        this.switchConfirm = true
      }
    },
    /*
     * @desc: dialog 确认封禁账户
     * @params: none
     * @return: undefined
     * */
    handleFrozenSubmit() {
      if (this.reasonForFreezing.trim() === '') {
        this.$message.warning('请填写冻结原因')
      } /* @desc: 发起请求， 封禁 */ else {
        toFreezeUser(
          this.currentOperatingAccount.user_id,
          this.reasonForFreezing
        )
          .then(this.handleFreezeResult)
          .catch(() => this.$message.error('冻结账户操作失败'))
      }
    },
    /*
     * @desc: 解封用户
     * @params: none
     * @return: undefined
     * */
    handleUnblockAccount() {
      toFreezeUser(this.currentOperatingAccount.user_id)
        .then(this.handleFreezeResult)
        .catch(() => this.$message.error('解冻账户操作失败'))
    },
    /*
     * @desc: 解决冻结操作结果函数
     * @params: res: Object  请求结果
     * @return: undefined
     * */
    handleFreezeResult(res) {
      const { code } = res
      if (code !== 200) return
      /* @desc: 清空数据 */
      this.switchConfirm = false
      this.switchFreeze = false
      this.reasonForFreezing = ''
      this.currentOperatingAccount = {}
      this.$message.success('操作成功~')
      this.getList() /* @desc: 刷新表格数据 */
    },

    /**自定义时间 */
    handleChangeDate(value) {
      if (value) {
        this.listQuery.register_time_start = value[0] / 1000
        this.listQuery.register_time_end = value[1] / 1000
      } else {
        this.listQuery.register_time_start = undefined
        this.listQuery.register_time_end = undefined
      }
    },
    // 获取会员列表
    getList() {
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total
        this.confirmBtn = false
      })
    },
    getTypeList() {
      let urlData = `?page=1&perPage=10000`
      listTypeData(urlData).then(response => {
        response.data.list.forEach(item => {
          this.giftBagList.push({ value: item.id, label: item.name })
        })
      })
    },
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1
      this.getList()
    },
    // 点击重置
    resetSubmit() {
      this.listQuery.page = 1
      this.listQuery.perPage = 10
      this.listQuery.has_gift_bag = undefined
      this.listQuery.sex = undefined
      this.listQuery.nickname = undefined
      this.listQuery.user_code = undefined
      this.listQuery.app_type = undefined
      this.listQuery.mobile = undefined
      this.listQuery.register_time_start = undefined
      this.listQuery.register_time_end = undefined
      this.date_value = null
    },
    // 充值
    rowRecharge(row) {
      this.row_id = row.user_id
      this.rechargeForm = {
        money: undefined,
        type: 1,
        describe: undefined
      }
      this.rechargeVisible = true
      // this.resetForm('rechargeForm')
    },
    // 送礼物
    rowSendGift(row) {
      this.row_id = row.user_id
      this.sendGiftForm = {
        gift_id: undefined,
        number: undefined
      }
      this.sendGiftVisible = true
    },
    // 详情
    rowDetail(row) {
      this.detailForm = {
        head_picture: undefined,
        user_code: undefined,
        nickname: undefined,
        sex: undefined,
        real_name: undefined,
        identity_number: undefined,
        birthday: undefined,
        signature: undefined,
        constellation: undefined,
        profession: undefined,
        gift_bag_id: undefined,
        gift_bag_quantity: undefined,
        couple: {
          level: undefined,
          teammate: {
            user_code: undefined,
            nickname: undefined
          }
        }
      }
      this.detailPictureList = []

      userAccountDetail({
        user_id: row.user_id
      }).then(res => {
        if(res.code === 200) {
          this.$set(this.detailForm, 'head_picture', res.data.head_picture)
          this.detailPictureList = [{ url: res.data.head_picture }]
          this.$set(this.detailForm, 'user_code', res.data.user_code)
          this.$set(this.detailForm, 'nickname', res.data.nickname)
          this.$set(this.detailForm, 'sex', res.data.sex)
          this.$set(this.detailForm, 'real_name', res.data.real_name)
          this.$set(this.detailForm, 'identity_number', res.data.identity_number)
          this.$set(this.detailForm, 'birthday', res.data.birthday)
          this.$set(this.detailForm, 'signature', res.data.signature)
          this.$set(this.detailForm, 'constellation', res.data.constellation)
          this.$set(this.detailForm, 'profession', res.data.profession)
          this.$set(this.detailForm, 'gift_bag_id', res.data.gift_bag_id)
          this.$set(this.detailForm, 'gift_bag_quantity', res.data.gift_bag_quantity)

          if(res.data.couple) {
            this.$set(this.detailForm, 'couple', res.data.couple)
          }
          this.$nextTick(() => {
            document.querySelector('.el-upload').style = 'display:none'
          })
        }
      })

      this.row_id = row.user_id


      this.detailVisible = true
    },
    // 删除
    rowDelete(row) {
      this.dataIds = { ids: `${row.user_id}` }
      this.deleteVisible = true
    },
    // 封用户
    rowBan(row) {
      this.row_id = row.user_id
      this.banForm.action = 1
      this.banVisible = true
      this.resetForm('banForm')
    },
    // 解封
    rowCancelBan(row) {
      this.banForm.action = 2
      this.row_id = row.user_id
      this.cancelBanVisible = true
    },
    // 设为官方
    rowSetRoot(row) {
      this.row_id = row.user_id
      this.setRootVisible = true
    },
    // 取消设为官方
    rowCancelSetRoot(row) {
      this.row_id = row.user_id
      this.cancelSetRootVisible = true
    },
    // 重置环信帐号
    rowReset(row) {
      this.row_id = row.user_id
      this.resetVisible = true
    },
    // 赠送经验
    rowExperience({ user_id, exp, rank_id }) {
      this.sendExperienceForm = {
        exp: undefined,
        rank_id: undefined,
        experience: undefined
      }
      this.row_id = user_id
      this.sendExperienceForm.exp = exp
      this.sendExperienceForm.rank_id = rank_id
      this.sendExperienceVisible = true
    },
    rowContacts(row) {
      this.$router.push({
        path: '/contacts/contactsDetail',
        query: { user_id: row.user_id }
      })
    },
    rowTeenModel(row) {
      this.row_id = row.user_id
      this.resetTeenPwdVisible = true
    },
    //换绑用户手机号
    rowPhone(row) {
      this.row_id = row.user_id
      this.changePhone = true
      this.resetForm('changePhoneForm')
    },
    handlePhone(changePhoneForm) {
      let data = { mobile: this.changePhoneForm.mobile, user_id: this.row_id }
      this.$refs[changePhoneForm].validate(valid => {
        if (valid) {
          toPutChangePhone(data).then(res => {
            if (res.code === 200) {
              this.$message.success('换绑成功')
              this.changePhone = false
            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    handleChangePhone() {
      this.changePhone = false
    },
    // 获取礼物列表
    getGiftList() {
      let obj = {
        page: 1,
        perPage: 1000
        // sold: 2
      }
      listGiftData(obj).then(response => {
        response.data.list.forEach(item => {
          this.giftForm.push({ value: item.id, label: item.name })
        })
      })
    },
    handleRemove(file, fileList) {
      document.querySelector('.el-upload').style = 'display:block'
      this.detailForm.head_picture = ''
    },
    handleError() {
      document.querySelector('.el-upload').style = 'display:block'
      this.detailForm.head_picture = ''
    },
    handleChange() {
      document.querySelector('.el-upload').style = 'display:none'
    },
    handleSuccess(response, file, fileList) {
      this.detailForm.head_picture = this.ossLastImgUrl
    },
    // 图片上传
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/webp' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('请上传JPG/PNG格式的图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 提交表单
    confirmSubmit(formName) {
      if (this.confirmBtn) return
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmBtn = true
          switch (formName) {
            case 'rechargeForm':
              // 充值接口
              postRecharge(this.row_id, this.rechargeForm).then(response => {
                if (response.code === 200) {
                  this.getList()
                  this.rechargeVisible = false
                  this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                  })
                } else {
                  this.confirmBtn = false
                }
              })
              break
            case 'sendGiftForm':
              if (
                !parseFloat(this.sendGiftForm.number) ||
                this.sendGiftForm.number <= 0
              ) {
                this.$message.error('请输入合法的数字')
                return
              }
              postSendGift(this.row_id, this.sendGiftForm)
                .then(response => {
                  this.getList()
                  this.sendGiftVisible = false
                  this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                  })
                })
                .catch(() => this.$message.error('封禁失败'))
              break
            case 'detailForm':
              let obj = {}
              for (let key in this.detailForm) {
                if (
                  this.detailForm[key] !== undefined &&
                  this.detailForm[key] !== '' &&
                  this.detailForm[key] !== null
                ) {
                  obj[key] = this.detailForm[key]
                }
              }
              putEditData(this.row_id, obj).then(response => {
                if (response.code === 200) {
                  this.getList()
                  this.detailVisible = false
                  this.detailForm = {}
                  this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                  })
                } else {
                  this.confirmBtn = false
                }
              })
              break
            case 'banForm':
              postSetBan(this.row_id, this.banForm).then(response => {
                if (response.code === 200) {
                  this.getList()
                  this.banVisible = false
                  this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                  })
                } else {
                  this.confirmBtn = false
                }
              })
              break
            case 'sendExperienceForm':
              let expObj = {
                exp: keepTwoDecimal(this.sendExperienceForm.experience)
              }
              postSendExperience(this.row_id, expObj).then(response => {
                if (response.code === 200) {
                  this.banForm.action = 2
                  this.getList()
                  this.sendExperienceVisible = false
                  this.sendExperienceForm.exp = ''
                  this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                  })
                } else {
                  this.confirmBtn = false
                }
              })
              break
            case 'addStoneForm':
            userBalanceSwap(this.addStoneForm).then(res => {
              if(res.code === 200) {
                this.getList()
                this.$notify({
                    type: 'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                })
                this.addStoneVisible = false
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 重置表单内容
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    confirmDelete() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      // 确认删除接口
      deleteData(this.dataIds).then(response => {
        if (response.code === 200) {
          this.getList()
          this.deleteVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    confirmCancelBan() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      let obj = {}
      obj['action'] = 2
      postSetBanNew(this.row_id, obj).then(response => {
        if (response.code === 200) {
          this.getList()
          this.banForm.action = 1
          this.cancelBanVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    confirmSetRoot() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      // 确认设为官方接口
      postSetRoot(this.row_id, 2).then(response => {
        if (response.code === 200) {
          this.getList()
          this.setRootVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    confirmCancelSetRoot() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      postSetRoot(this.row_id, 1).then(response => {
        if (response.code === 200) {
          this.getList()
          this.cancelSetRootVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    confirmReset() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      // 确认重置环信帐号接口
      postReset(this.row_id).then(response => {
        if (response.code === 200) {
          this.getList()
          this.resetVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    confirmResetTeenPwd() {
      if (this.confirmBtn) return
      this.confirmBtn = true
      // 确认重置青少年模式接口
      postTeenPwd(this.row_id).then(response => {
        if (response.code === 200) {
          this.getList()
          this.resetTeenPwdVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        } else {
          this.confirmBtn = false
        }
      })
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate() // 清除整个表单的校验
      }
    },
    async auditGift(row) {
      const { user_id } = row
      const { code, message } = await request({
        url: '/admin/giftWall/fixNumber',
        method: 'post',
        data: {
          user_id
        }
      })
      if (code === 200) {
        this.$message.success('修复成功' || message)
      } else {
        this.$message.error('修复失败')
      }
    },
    async auditCancel(row) {
      console.log(row)
      const { user_id } = row
      const { code, message } = await request({
        url: '/user-manager/user-account/headPictureAudit/cancel',
        method: 'post',
        data: {
          user_id
        }
      })

      if (code === 200) {
        this.$message.success('撤销成功' || message)
      } else {
        this.$message.error('撤销失败')
      }
    },
    handleMBeanFlow(row) {
        this.$router.push({
            path: 'mBeanFlow',
            query: {
                user_id: row.user_id,
                type: 1
            }
        })
    },
    handleIntegralFlow(row) {
        this.$router.push({
            path: 'integralFlow',
            query: {
                user_id: row.user_id,
                type: 2
            }
        })
    },
    handleAddStone(row) {
      this.addStoneVisible = true
      this.addStoneForm.user_id = row.user_id
      this.addStoneForm.count = row.count
    }
  }
}
</script>

<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

/* .el-dialog__body {
  padding-top: 0px;
} */

/deep/ .el-upload-list__item {
  transition: none !important;
}
</style>
